<template>
    <div>
        <div style="margin-bottom: 56px" >
            <div style="margin-bottom:10px;font-size: 18px;width: 100%;height: 50px;background-color: red;line-height: 50px;color: white;text-align: center">
                <span style="margin-left: 15px">热门歌手</span>
            </div>
            <van-loading color="red"  v-if="loading" class="pos"/>
            <router-link :to="{path:'/mv',query:{id:item.id}}" tag="li" v-for="(item) in arr" :key="item.id" class="singer" @click="dianji(item.id)" v-else>
                <img style="width: 25%;height: 100%;float: left" :src="item.picUrl" alt="">
                <span style="width: 60%;height: 100%;display: inline-block;float: left;line-height: 60px;padding-left: 20px">{{item.name}}</span>
            </router-link>
        </div>
    </div>
</template>

<script>

    import {music} from "../api/api";

    export default {
        name: "ranVideo",

        data() {
            return {
                arr:[],
                loading:true
            }
        },
        created() {
            music().then((res)=>{
                console.log(res.artists)
                this.arr = res.artists
                this.loading=false;
            })
        },
    }
</script>

<style scoped>
    .pos{
        position: absolute;
        top:48%;
        left:48%;
    }
    li{
        list-style: none;
        padding:1px 5px;
    }
    .singer{
        margin-bottom: 10px;
        height: 80px;
    }
</style>